<!-- This document was created with HomeSite 2.5 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>Paint with All the Colors of the Screen</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function screenColors(depth)
{
return Math.pow(2,depth)
}
//-->
</SCRIPT>
<BODY>
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>Paint with All The Colors of the Screen</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we find out how many colors the display will generate.
</FONT>
<FONT FACE="Arial,Helvetica" SIZE="3">
<UL>
<LI><SCRIPT LANGUAGE="JavaScript1.2">document.write("Pixels use "+screen.pixelDepth+' bit(s) to determine color (<KBD><FONT COLOR="770000">screen.pixelDepth</FONT></KBD>)')</SCRIPT></LI>
<LI><SCRIPT LANGUAGE="JavaScript1.2">document.write("This display can generate "+screenColors(screen.pixelDepth)+' colors')</SCRIPT></LI>
</UL>
</FONT>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
In the <A HREF="RESOLVE.HTM">Available Screen Real Estate</A> recipe you learned how to find out
just how much screen room you have to display text and graphics on a web page. The other important factor
in determining how well your page will display is the number of colors available with the user's graphics
adapter and monitor combination.<p>
While you will have gone to a lot of trouble to create full-color JPEG graphics for your page, the odds are that
a lot of your potential "customers" are still viewing the Web in just 256 colors.
<SCRIPT LANGUAGE="JavaScript1.2">
if(screen.pixelDepth==8) document.write("(Our quick check says you'd be one of them!)")
</SCRIPT>
This means that the browser can't reproduce your full-color graphics in all their glory, and will be reduced
to <A HREF="DITHER.HTM">dithering</A> them.<p>
Since dithered graphics lose detail, you might want to have a second set of graphics in a lower color resolution
which you can substitute via JavaScript once you've determined the number of available colors. This takes up more
space on the server, but it's better than letting the browser dither your graphics "on-the-fly." If you're using
a good quality paint or drawing program, its dithering capabilities will be superior what's available in any
given browser, and will make for better graphics at the user's end. The better the graphics look, the better you look!<p>
Here's a little script fragment example to give you an idea of how to substitute graphics based on color resolution.<P>
</FONT><FONT COLOR="770000"><pre>
function PictureOfMyDog()
//
// One of your authors has a dog named "Honey"
//
{
document.write('<IMG SRC="');
if(screen.pixelDepth == 4) // 16 colors!
document.write('LOWRESHONEY.GIF');
else
if(screen.pixelDepth == 8) // 256 colors
document.write('HONEYIN256.GIF');
else // 65,536 or 16,777,216 colors
document.write('FULLCOLORHONEY.JPG');
document.writeln('" HEIGHT=64 WIDTH=96>');
}
</pre>
</FONT>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>